<div class="layui-row">
    <div class="layui-col-sm3 plr15 mb15">

        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge pull-right">急</span>
                <h5>订单</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">157</h1>
                <small><a href="javascript:void(0);" class="opFrames" data-name="订单管理"
                          data-href="/admin/order.store_order/index.html?status=1">待发货</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge pull-right">急</span>
                <h5>订单</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">55</h1>
                <small><a href="javascript:void(0);" class="opFrames" data-name="订单管理"
                          data-href="/admin/order.store_order/index.html?status=-1">退换货</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge pull-right">急</span>
                <h5>商品</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">4</h1>
                <small><a href="javascript:void(0);" class="opFrames" data-name="商品管理"
                          data-href="/admin/store.store_product/index.html?type=5">库存预警</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-blue pull-right">待</span>
                <h5>商户</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">0</h1>
                <small><a href="javascript:void(0);" class="opFrames" data-name="提现盛情"
                          data-href="/admin/finance.user_extract/index.html">昨日新增商户</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-blue pull-right">昨</span>
                <h5>订单</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">3</h1>
                <div class="stat-percent font-bold text-navy">
                    0%
                </div>
                <small><a href="javascript:void(0);" class="opFrames" data-name="订单管理"
                          data-href="/admin/order.store_order/index.html?data=yesterday">昨日支付订单</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-blue pull-right">昨</span>
                <h5>交易</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">9.8</h1>
                <div class="stat-percent font-bold text-info">
                    8.8%
                    <i class="fa fa-level-up"></i></div>
                <small><a href="javascript:void(0);" class="opFrames" data-name="订单管理"
                          data-href="/admin/order.store_order/index.html?data=yesterday">昨日交易额</a></small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-blue pull-right">今</span>
                <h5>用户</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">62</h1>
                <div class="stat-percent font-bold text-info">
                    14%
                    <i class="fa fa-level-down"></i></div>
                <small><a href="javascript:void(0);" class="opFrames" data-name="会员管理" data-href="/admin/user.user/index.html">今日新增粉丝</a>
                </small>
            </div>
        </div>
    </div>
    <div class="layui-col-sm3 plr15 mb15 ">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="layui-badge layui-bg-blue pull-right">月</span>
                <h5>用户</h5>
            </div>
            <div class="layui-card-body ">
                <h1 class="no-margins">734</h1>
                <div class="stat-percent font-bold text-info">
                    562%
                    <i class="fa fa-level-down"></i></div>
                <small><a href="javascript:void(0);" class="opFrames" data-name="会员管理" data-href="/admin/user.user/index.html">本月新增粉丝</a>
                </small>
            </div>
        </div>
    </div>

</div>
<div id="app">
    <div class="layui-row plr15 mb15">
        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="pull-right">
                        <div class="btn-group">
                            <span class="layui-badge-rim active">30天</span>
                            <span class="layui-badge-rim">周</span>
                            <span class="layui-badge-rim">月</span>
                            <span class="layui-badge-rim">年</span>
                        </div>
                    </div>
                    <h5>订单</h5>
                </div>
                <div class="layui-card-body ">
                    <div class="layui-row plr15 mb15">
                        <div class="layui-col-lg9">
                            <div id="order-container" style="height: 280px;width: 100%"></div>
                        </div>
                        <div class="layui-col-lg3">
                            <ul class="stat-list">
                                <li><h2 class="no-margins ">2812.62</h2>
                                    <small>上个30天销售额</small>
                                </li>
                                <li><h2 class="no-margins ">1173.21</h2>
                                    <small>最近30天销售额</small>
                                    <div class="stat-percent text-danger">
                                        58.29%
                                        <i class="fa fa-level-down"></i></div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar box" style="width: 58.29%;"></div>
                                    </div>
                                </li>
                                <li><h2 class="no-margins ">469</h2>
                                    <small>上个30天订单总数</small>
                                </li>
                                <li><h2 class="no-margins">200</h2>
                                    <small>最近30天订单总数</small>
                                    <div class="stat-percent text-danger">
                                        57.36%
                                        <i class="fa fa-level-down"></i></div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar box" style="width: 57.36%;"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row plr15 mb15">
        <div class="layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header"><h5>用户</h5></div>
                <div class="layui-card-body ">
                    <div class="layui-row">
                        <div class="layui-col-lg12">
                            <div id="user-container" style="height: 280px;width: 100%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style scoped="">
    .layui-layout-admin .layui-body {
        background-color: #f3f3f4;
    }

    .layui-badge-rim {
        cursor: pointer;
    }

    .layui-badge-rim.active {
        background-color: #1E9FFF !important;
        color: #ffffff;
    }

</style>

<script>
    var methods={};
    layui.use(['tools', 'echarts'], function () {
        let tools = layui.tools;
        let echarts = layui.echarts;

        methods = {
            searchOrderECharts: function (type) {
                return {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {data: ['上周金额', "本周金额", "上周订单数", "本周订单数"]},
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            min: 0,
                            max: 250,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        },
                        {
                            type: 'value',
                            name: '订单数',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} 单'
                            }
                        }
                    ],
                    series: [{
                        name: '上周金额',
                        type: "bar",
                        itemStyle: {normal: {label: {show: true, position: "top"}}},
                        data: [10, 0, 0, 0, 0, 0, 0]
                    }, {
                        name: "本周金额",
                        type: "bar",
                        itemStyle: {normal: {label: {show: true, position: "top"}}},
                        data: [20, 70.56, 139, 6, 56.8, 84.6, 62.53]
                    }, {
                        name: "上周订单数",
                        type: "line",
                        itemStyle: {normal: {label: {show: true, position: "top"}}},
                        data: [0, 0, 0, 0, 0, 0, 0]
                    }, {
                        name: "本周订单数",
                        type: "line",
                        itemStyle: {normal: {label: {show: true, position: "top"}}},
                        data: [0, 17, 11, 4, 11, 13, 14]
                    }],
                    pre_cycle: {count: {data: 0}, price: {data: 0}},
                    cycle: {
                        count: {data: 70, percent: 7000, is_plus: 1},
                        price: {data: "419.49", percent: 41949, is_plus: 1}
                    }
                };
            }
        }

        var option = methods.searchOrderECharts();

        var myChart = echarts.init(document.getElementById("order-container"));
        var app = {};
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

        var userChart = echarts.init(document.getElementById("user-container"));
        var app = {};
        if (option && typeof option === "object") {
            userChart.setOption(option, true);
        }

    })

</script>


